<template>
	<base-page title="反馈详情" navbarBgColor="white">
		<view v-if="detail" class="p-16">
			<view class="flex justify-between item-center leading-20">
				<text class="text-color-regular fs-14 font-semibold">反馈与建议</text>
				<view class="inline-flex item-center text-color-hint fs-14 font-normal">
					<text>{{detail.createTime}}</text>
					<!-- <image class="w-6 h-11 ml-4" src="@/static/svg/arrow-stroke.svg"></image> -->
				</view>
			</view>
			<view class="mt-8 radius-12 bg-white px-12 py-16">
				<view class="text-color-regular fs-14 font-normal">
					<text>{{detail.content}}</text>
				</view>
				<!--
				<scroll-view scroll-x>
					<image v-for="(item,i) in detail.imgs.split(',')" :key="i" class="radius-8 mr-8" style="width:80px;height:80px;" :src="item"></image>
				</scroll-view>
				-->
				<view v-if="detail.imgs" class="mt-8" style="display:grid;grid-template-columns:repeat(auto-fill, 80px);grid-row-gap:8px;grid-column-gap:8px;">
					<view v-for="(item,i) in detail.imgs.split(',')" :key="i" class="relative" style="width:80px;height:80px;" @click="toPreview(i, detail.imgs.split(','))">
						<image class="h-full w-full radius-8" :src="item"></image>
					</view>
				</view>
			</view>
			<view class="mt-16 leading-20 text-color-regular fs-14 font-semibold">联系方式</view>
			<view class="mt-8 radius-8 bg-white px-16 py-12">
				<view class="flex item-center leading-20 fs-14 font-normal">
					<text class="text-color-regular" style="width:80px;">联系人</text>
					<text class="text-color-hint">{{detail.contacts || '未填写'}}</text>
				</view>
				<view class="mt-16 flex item-center leading-20 fs-14 font-normal">
					<text class="text-color-regular" style="width:80px;">联系电话</text>
					<text class="text-color-hint">{{detail.mobile || '未填写'}}</text>
				</view>
				<view class="mt-16 flex item-center leading-20 fs-14 font-normal">
					<text class="text-color-hint" style="width:80px;">反馈编号：</text>
					<text class="text-color-hint">{{detail.feedbackNo}}</text>
					<text class="color-primary ml-12" @click.stop="toCopy(detail.feedbackNo)">复制</text>
				</view>
			</view>
			<!-- <view class="text-color-hint fs-12 leading-17 mt-30">没有更多了～</view> -->
		</view>
	</base-page>
</template>

<script setup name="FeedbackDetail">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	
	const instance = getCurrentInstance()
	
	const detail = ref()
	
	const toPreview = (index, list) => {
		uni.previewImage({
			urls: list,
			current: index
		})
	}
	
	const toCopy = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			detail.value = data
		})
	})
</script>
